<template>
  <div>
    <div class="editTop">
      <el-button
        icon="el-icon-back"
        circle
        @click="closeEditModal"
        type="primary"
      ></el-button>
      <span>{{ isEdit ? "编辑" : "新增" }}专栏</span>
    </div>
    <el-form
      label-position="right"
      label-width="120px"
      :model="form"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="专栏标题" prop="name">
        <el-input v-model="form.name" style="max-width: 480px"></el-input>
      </el-form-item>
      <el-form-item
        label="封面图片"
        prop="coverUrl"
        @click="uploadImageName = 'coverUrl'"
      >
        <uploadCropper
          :handleAvatarSuccess="handleAvatarSuccess('coverUrl')"
          :url="form.coverUrl"
        />
        <el-alert
          style="margin-top: 50px"
          show-icon
          title="图片比最佳分辨率为38px：20px的整数倍。"
          type="info"
        >
        </el-alert>
      </el-form-item>
      <el-form-item
              label="顶部大图片"
              prop="topImgUrl"
              @click="uploadImageName = 'topImgUrl'"
      >
        <uploadCropper
                :handleAvatarSuccess="handleAvatarSuccess('topImgUrl')"
                :url="form.topImgUrl"
        />
        <el-alert
                style="margin-top: 50px"
                show-icon
                title="图片比最佳分辨率为1920px：910px。"
                type="info"
        >
        </el-alert>
      </el-form-item>
      <el-form-item label="时间" prop="date">
        <el-date-picker
          v-model="form.date"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="地点" prop="location">
        <el-input v-model="form.location" style="max-width: 480px"></el-input>
      </el-form-item>
      <el-form-item label="权重" prop="weight">
        <el-input v-model="form.weight" style="width: 80px"></el-input>
      </el-form-item>
      <el-form-item label="背景颜色" prop="bgColor">
        <el-color-picker v-model="form.bgColor"> </el-color-picker>
      </el-form-item>
      <el-form-item
        label="背景图片"
        prop="bmImgUrl"
        @click="uploadImageName = 'bmImgUrl'"
      >
        <div class="pics">
          <div
            class="pic"
            v-for="(itemsItem, index) in form.bgImgUrls"
            :key="index"
          >
            <uploadCropper
              style="height: 160px"
              :handleAvatarSuccess="handlePicSuccess(index)"
              :deletePic="deletePic"
              :index="index"
              :url="itemsItem"
            />
          </div>
          <el-button
            @click="addPics"
            type="primary"
            icon="el-icon-plus"
            circle
          ></el-button>
        </div>
      </el-form-item>
      <el-form-item label="报名链接" prop="bmUrl">
        <el-input v-model="form.bmUrl" style="max-width: 480px"></el-input>
      </el-form-item>
      <el-form-item
        label="报名弹窗图片"
        prop="bmImgUrl"
        @click="uploadImageName = 'bmImgUrl'"
      >
        <uploadCropper
          :handleAvatarSuccess="handleAvatarSuccess('bmImgUrl')"
          :deletePic="() => (form.bmImgUrl = '')"
          :url="form.bmImgUrl"
        />
        <el-alert
          style="margin-top: 50px"
          show-icon
          title="图片比最佳分辨率为548px：362px。"
          type="info"
        >
        </el-alert>
      </el-form-item>
      <el-form-item label="上线状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio
            v-for="(value, key) in adStatus"
            :label="Number(key)"
            :key="key"
            >{{ value }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item >
        <el-button @click="closeEditModal">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <columnList v-if="isEdit" :originForm="originForm" />
  </div>
</template>
<script>
import { getUploadToken, uploadUrl } from "@/util/upload";
import { adStatus } from "@/config/ad";
import columnList from "./columnList.vue";

export default {
  props: ["originForm", "isEdit", "closeEditModal"],
  components: {
    columnList,
  },
  data() {
    return {
      adStatus,
      // 上传相关
      uploadData: {},
      uploadImageName: "",
      uploadUrl,
      form: {
        status: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入专栏姓名", trigger: "blur" }],
        job: [{ required: true, message: "请输入专栏职务", trigger: "blur" }],
        desc: [{ required: true, message: "请输入专栏介绍", trigger: "blur" }],
        bigImage: [
          { required: true, message: "请输入专栏介绍", trigger: "blur" },
        ],
        smallImage: [
          { required: true, message: "请输入专栏介绍", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择发布状态", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      const { originForm, form, isEdit } = this;
      const ajaxType = isEdit ? "put" : "post";
      if (!isEdit) delete this.form.uuid;
      const url = isEdit
        ? `/api/zl/${originForm.uuid}.json?_method=put`
        : "/api/zl.json";
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$axios[ajaxType](url, this.form).then((response) => {
            this.$message.success("提交成功");
            this.closeEditModal();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deletePic(index) {
      this.form.bgImgUrls.splice(index, 1)
    },
    addPics() {
      if (this.form.bgImgUrls) {
        this.form.bgImgUrls.push('')
      } else {
        this.form.bgImgUrls = ['']
      }
    },
    handlePicSuccess(index, res, file) {
      const $index = index;
      return (res, file) => {
        const fileObj = this.$utils.judgeLogin(res);
        this.form.bgImgUrls[$index] = fileObj.url;
        this.form = JSON.parse(JSON.stringify(this.form));
        console.log(this.form);
      };
    },
    handleAvatarSuccess(name, res, file) {
      const fileName = name;
      return (res, file) => {
        const fileObj = this.$utils.judgeLogin(res);
        this.form[fileName] = fileObj.url;
        this.form = JSON.parse(JSON.stringify(this.form));
      };
    },
    beforeAvatarUpload(file) {
      return getUploadToken(file.name).then((res) => {
        this.uploadData.token = res.ticket;
      });
    },
  },
  created() {
    this.form = this.originForm;
    // this.form.bgImgUrls = ["http://iot.vnest.net/api/files/down/1403929813818937345.jpg","http://iot.vnest.net/api/files/down/1403929837617418241.jpg"]
  },
  mounted() {},
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.editTop {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  margin-left: 20px;
  button {
    margin-right: 10px;
  }
}
.footer {
  display: flex;
  justify-content: center;
}
.divideTop {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 146px;
  height: 146px;
  display: block;
  overflow: hidden;
}

.pics {
  display: flex;
  flex-direction: row;
  align-items: center;

  // max-width: 400px;
  display: flex;
  flex-wrap: wrap;
  .pic {
    width: 150px;
    height: 150px;
    margin-bottom: 50px;
  }
}
</style>
